<body>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <canvas id="app" width="800" height="1800" style="width: 800px; height: 1800px;"></canvas>

    <script>
        var COUNT = 2000;

        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            name: 'main',
            webgl: !true
        });
        $app.start();
        $app.fpsHandler = console.log;

        $app.imgLoader.cacheCanvas = true;
        var demoPicUrl = 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/block.jpg';

        $app.imgLoader(demoPicUrl, function (img) {
            // create a Sprite
            for (var i = 0; i <= COUNT; i++)
                $app.add({
                    content: {
                        img: img,
                    },
                    style: {
                        left: Easycanvas.Transition.pendulum(500 - Math.random() * 1000, 500 - Math.random() * 1000, Math.random() * 3000 + 2000).loop(),
                        top: (Math.random() * 500),
                        width: (50 + Math.random() * 200),
                        height: (50 + Math.random() * 200),
                        // rotate: Math.random() * 360,
                        zIndex: Math.random(),
                        // rotate: 40,
                    },
                });
        });

        // var $Temp = new Easycanvas.Painter();
        // $Temp.register(document.createElement('canvas'), {
        //     name: 'temp',
        //     fullScreen: true
        // });
        // $Temp.start();

        // Easycanvas.ImgLoader(demoPicUrl, function (img) {
        //     // create a Sprite
        //     for (var i = 0; i <= COUNT / 2; i++)
        //         $Temp.add({
        //             name: 'SpriteOfTemp',
        //             content: {
        //                 img: img,
        //             },
        //             style: {
        //                 left: Easycanvas.Transition.pendulum(Math.random() * 500, Math.random() * 500, 1000).loop(),
        //                 top: (Math.random() * 500),
        //                 width: (Math.random() * 200),
        //                 height: (Math.random() * 200),
        //                 zIndex: Math.random(),
        //                 locate: 'lt',
        //                 opacity: 0.1,
        //                 // rotate: 40,
        //             },
        //         });
        // });

        window.__EASYCANVAS_DEVTOOL__.isPaintRecording = false;
    </script>
</body>

